<template>
  <div class="diary-list-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-text">
          <h1 class="page-title">我的日记</h1>
          <p class="page-subtitle">记录生活中的美好时光，留下珍贵的回忆</p>
        </div>
        <div class="header-actions">
          <router-link class="write-btn" to="/diary/write">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke="currentColor" stroke-width="2"/>
            </svg>
            写日记
          </router-link>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-container">
        <!-- 搜索框 -->
        <div class="search-box">
          <svg class="search-icon" fill="none" viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
            <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
          </svg>
          <input
            v-model="searchQuery"
            class="search-input"
            placeholder="搜索日记内容..."
            type="text"
          />
        </div>

        <!-- 筛选器 -->
        <div class="filters">
          <div class="filter-group">
            <label class="filter-label">时间范围</label>
            <select v-model="selectedTimeRange" class="filter-select">
              <option value="">全部时间</option>
              <option value="week">最近一周</option>
              <option value="month">最近一月</option>
              <option value="quarter">最近三月</option>
              <option value="year">今年</option>
            </select>
          </div>

          <div class="filter-group">
            <label class="filter-label">心情状态</label>
            <select v-model="selectedMood" class="filter-select">
              <option value="">全部心情</option>
              <option value="happy">开心</option>
              <option value="excited">兴奋</option>
              <option value="calm">平静</option>
              <option value="thoughtful">沉思</option>
              <option value="sad">难过</option>
              <option value="tired">疲惫</option>
              <option value="angry">生气</option>
            </select>
          </div>

          <div class="filter-group">
            <label class="filter-label">排序方式</label>
            <select v-model="sortOrder" class="filter-select">
              <option value="newest">最新优先</option>
              <option value="oldest">最早优先</option>
              <option value="title">标题排序</option>
            </select>
          </div>

          <button
            v-if="hasActiveFilters"
            class="clear-filters"
            @click="clearFilters"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
            清空筛选
          </button>
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ diaries.length }}</div>
            <div class="stat-label">篇日记</div>
          </div>
        </div>

        <div class="stat-item">
          <div class="stat-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ getDaysCount() }}</div>
            <div class="stat-label">天记录</div>
          </div>
        </div>

        <div class="stat-item">
          <div class="stat-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ getPhotoCount() }}</div>
            <div class="stat-label">张照片</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 日记列表 -->
    <div v-if="filteredDiaries.length > 0" class="diary-list-section">
      <div class="list-header">
        <h2 class="list-title">
          {{ getListTitle() }}
          <span class="result-count">({{ filteredDiaries.length }}篇)</span>
        </h2>
        <div class="view-controls">
          <button
            :class="{ active: viewMode === 'card' }"
            class="view-btn"
            @click="viewMode = 'card'"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="3"/>
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="3"/>
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="14" y="14"/>
              <rect height="7" stroke="currentColor" stroke-width="2" width="7" x="3" y="14"/>
            </svg>
          </button>
          <button
            :class="{ active: viewMode === 'timeline' }"
            class="view-btn"
            @click="viewMode = 'timeline'"
          >
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="6" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="12" y2="12"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="18" y2="18"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- 卡片视图 -->
      <div v-if="viewMode === 'card'" class="diary-grid">
        <div
          v-for="diary in filteredDiaries"
          :key="diary.id"
          class="diary-card"
          @click="openDiary(diary)"
        >
          <div class="card-header">
            <div class="card-date">
              <div class="date-day">{{ formatDay(diary.date) }}</div>
              <div class="date-month">{{ formatMonth(diary.date) }}</div>
            </div>
            <div class="card-mood">
              <span class="mood-emoji">{{ getMoodEmoji(diary.mood) }}</span>
              <span class="mood-text">{{ getMoodText(diary.mood) }}</span>
            </div>
          </div>

          <div class="card-content">
            <h3 class="card-title">{{ diary.title }}</h3>
            <p class="card-preview">{{ diary.preview }}</p>
          </div>

          <div class="card-footer">
            <div class="card-meta">
              <span class="meta-time">{{ formatTime(diary.date) }}</span>
              <span v-if="diary.hasPhotos" class="meta-photos">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2"/>
                </svg>
                有图片
              </span>
            </div>
            <div class="card-actions">
              <button class="action-btn edit" @click.stop="editDiary(diary)">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="currentColor" stroke-width="2"/>
                  <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
              <button class="action-btn share" @click.stop="shareDiary(diary)">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4-4 4M12 2v13" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 时间线视图 -->
      <div v-else class="diary-timeline">
        <div
          v-for="diary in filteredDiaries"
          :key="diary.id"
          class="timeline-item"
          @click="openDiary(diary)"
        >
          <div class="timeline-date">
            <div class="date-marker">
              <div class="marker-dot"></div>
              <div class="marker-line"></div>
            </div>
            <div class="date-info">
              <div class="date-main">{{ formatFullDate(diary.date) }}</div>
              <div class="date-time">{{ formatTime(diary.date) }}</div>
            </div>
          </div>

          <div class="timeline-content">
            <div class="content-header">
              <h3 class="content-title">{{ diary.title }}</h3>
              <div class="content-mood">
                <span :class="diary.mood" class="mood-indicator">{{ getMoodEmoji(diary.mood) }}</span>
              </div>
            </div>
            <p class="content-preview">{{ diary.preview }}</p>
            <div class="content-meta">
              <span v-if="diary.hasPhotos" class="meta-item photos">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2"/>
                </svg>
                包含图片
              </span>
              <span class="meta-item word-count">{{ getWordCount(diary.content) }} 字</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">
        <svg fill="none" viewBox="0 0 24 24">
          <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>
      <h3 class="empty-title">
        {{ hasActiveFilters ? '没有找到匹配的日记' : '还没有日记记录' }}
      </h3>
      <p class="empty-text">
        {{ hasActiveFilters ? '尝试调整筛选条件，或者' : '' }}开始记录生活中的美好时光吧！
      </p>
      <div class="empty-actions">
        <router-link class="empty-action-btn primary" to="/diary/write">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke="currentColor" stroke-width="2"/>
          </svg>
          写第一篇日记
        </router-link>
        <button v-if="hasActiveFilters" class="empty-action-btn secondary" @click="clearFilters">
          <svg fill="none" viewBox="0 0 24 24">
            <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
            <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
          </svg>
          清空筛选
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from '@opentiny/vue'

const router = useRouter()

interface Diary {
  id: string
  title: string
  preview: string
  content: string
  date: Date
  mood: 'happy' | 'sad' | 'excited' | 'calm' | 'thoughtful' | 'tired' | 'angry'
  hasPhotos: boolean
  tags?: string[]
  wordCount?: number
}

// 响应式数据
const searchQuery = ref('')
const selectedTimeRange = ref('')
const selectedMood = ref('')
const sortOrder = ref('newest')
const viewMode = ref<'card' | 'timeline'>('card')

// 示例数据（实际应该从API获取）
const diaries = ref<Diary[]>([
  {
    id: '1',
    title: '美好的周末时光',
    preview: '今天和家人一起去公园野餐，孩子们玩得很开心，感受到了满满的幸福。天气格外晴朗，微风轻抚...',
    content: '今天和家人一起去公园野餐，孩子们玩得很开心，感受到了满满的幸福。天气格外晴朗，微风轻抚，是个完美的野餐日。我们带了很多好吃的，在草地上铺开野餐垫，一家人其乐融融地享受着这难得的悠闲时光。',
    date: new Date('2024-01-20T15:30:00'),
    mood: 'happy',
    hasPhotos: true,
    tags: ['家庭', '野餐', '周末'],
    wordCount: 120
  },
  {
    id: '2',
    title: '新年新计划',
    preview: '新的一年开始了，为自己和家人制定了一些计划和目标，希望能够在新的一年里有所收获...',
    content: '新的一年开始了，为自己和家人制定了一些计划和目标，希望能够在新的一年里有所收获。首先是健康方面，要坚持运动，保持良好的作息。其次是工作方面，要提升自己的技能，争取有更好的发展。',
    date: new Date('2024-01-01T09:00:00'),
    mood: 'thoughtful',
    hasPhotos: false,
    tags: ['新年', '计划', '目标'],
    wordCount: 85
  },
  {
    id: '3',
    title: '项目完成的成就感',
    preview: '经过几个月的努力，项目终于成功交付了！团队协作得非常好，每个人都发挥了自己的专长...',
    content: '经过几个月的努力，项目终于成功交付了！团队协作得非常好，每个人都发挥了自己的专长。从最初的需求分析，到系统设计，再到最后的测试上线，每一个环节都凝聚着大家的心血。客户对最终的结果也非常满意。',
    date: new Date('2024-01-18T18:20:00'),
    mood: 'excited',
    hasPhotos: false,
    tags: ['工作', '成就感', '团队'],
    wordCount: 95
  },
  {
    id: '4',
    title: '雨天的思考',
    preview: '外面下着绵绵细雨，坐在窗边，看着雨滴滑落玻璃，心情也跟着安静下来...',
    content: '外面下着绵绵细雨，坐在窗边，看着雨滴滑落玻璃，心情也跟着安静下来。雨天总是容易让人陷入沉思，想起很多往事，想起那些美好的回忆。人生就像这雨滴一样，有时急促，有时缓慢，但都在向着同一个方向流淌。',
    date: new Date('2024-01-15T14:10:00'),
    mood: 'calm',
    hasPhotos: true,
    tags: ['雨天', '思考', '回忆'],
    wordCount: 78
  },
  {
    id: '5',
    title: '学习新技能的困难',
    preview: '最近在学习一项新技能，遇到了不少困难，有时候会感到沮丧，但还是要坚持下去...',
    content: '最近在学习一项新技能，遇到了不少困难，有时候会感到沮丧，但还是要坚持下去。学习的过程总是不平坦的，需要不断地练习和积累。虽然现在还不够熟练，但我相信只要坚持，一定能够掌握这项技能。',
    date: new Date('2024-01-12T20:30:00'),
    mood: 'tired',
    hasPhotos: false,
    tags: ['学习', '技能', '坚持'],
    wordCount: 72
  }
])

// 计算属性
const filteredDiaries = computed(() => {
  let filtered = diaries.value

  // 搜索过滤
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(diary =>
      diary.title.toLowerCase().includes(query) ||
      diary.preview.toLowerCase().includes(query) ||
      diary.content.toLowerCase().includes(query) ||
      diary.tags?.some(tag => tag.toLowerCase().includes(query))
    )
  }

  // 时间范围过滤
  if (selectedTimeRange.value) {
    const now = new Date()
    const filterDate = new Date()

    switch (selectedTimeRange.value) {
      case 'week':
        filterDate.setDate(now.getDate() - 7)
        break
      case 'month':
        filterDate.setMonth(now.getMonth() - 1)
        break
      case 'quarter':
        filterDate.setMonth(now.getMonth() - 3)
        break
      case 'year':
        filterDate.setFullYear(now.getFullYear())
        filterDate.setMonth(0)
        filterDate.setDate(1)
        break
    }

    filtered = filtered.filter(diary => diary.date >= filterDate)
  }

  // 心情过滤
  if (selectedMood.value) {
    filtered = filtered.filter(diary => diary.mood === selectedMood.value)
  }

  // 排序
  switch (sortOrder.value) {
    case 'newest':
      filtered.sort((a, b) => b.date.getTime() - a.date.getTime())
      break
    case 'oldest':
      filtered.sort((a, b) => a.date.getTime() - b.date.getTime())
      break
    case 'title':
      filtered.sort((a, b) => a.title.localeCompare(b.title))
      break
  }

  return filtered
})

const hasActiveFilters = computed(() => {
  return searchQuery.value.trim() !== '' ||
         selectedTimeRange.value !== '' ||
         selectedMood.value !== ''
})

// 统计计算
const getDaysCount = () => {
  const uniqueDays = new Set(diaries.value.map(diary =>
    diary.date.toDateString()
  ))
  return uniqueDays.size
}

const getPhotoCount = () => {
  return diaries.value.filter(diary => diary.hasPhotos).length
}

// 格式化函数
const formatMonth = (date: Date) => {
  return date.toLocaleDateString('zh-CN', { month: 'short' })
}

const formatDay = (date: Date) => {
  return date.getDate().toString().padStart(2, '0')
}

const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}

const formatFullDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const getMoodEmoji = (mood: string) => {
  switch (mood) {
    case 'happy': return '😊'
    case 'excited': return '😆'
    case 'calm': return '😌'
    case 'thoughtful': return '🤔'
    case 'sad': return '😢'
    case 'tired': return '😴'
    case 'angry': return '😠'
    default: return '📝'
  }
}

const getMoodText = (mood: string) => {
  switch (mood) {
    case 'happy': return '开心'
    case 'excited': return '兴奋'
    case 'calm': return '平静'
    case 'thoughtful': return '沉思'
    case 'sad': return '难过'
    case 'tired': return '疲惫'
    case 'angry': return '生气'
    default: return '日记'
  }
}

const getWordCount = (content: string) => {
  return content.replace(/<[^>]*>/g, '').length
}

const getListTitle = () => {
  if (searchQuery.value) return '搜索结果'
  if (selectedMood.value) return `${getMoodText(selectedMood.value)}的日记`
  if (selectedTimeRange.value) {
    switch (selectedTimeRange.value) {
      case 'week': return '最近一周的日记'
      case 'month': return '最近一月的日记'
      case 'quarter': return '最近三月的日记'
      case 'year': return '今年的日记'
      default: return '全部日记'
    }
  }
  return '全部日记'
}

// 事件处理
const clearFilters = () => {
  searchQuery.value = ''
  selectedTimeRange.value = ''
  selectedMood.value = ''
  sortOrder.value = 'newest'
}

const openDiary = (diary: Diary) => {
  router.push(`/diary/${diary.id}`)
}

const editDiary = (diary: Diary) => {
  router.push(`/diary/write?id=${diary.id}`)
}

const shareDiary = (diary: Diary) => {
  console.log('分享日记:', diary.title)
  Notify({
    type: 'info',
    message: '分享功能开发中...',
    position: 'top-right'
  })
}
</script>

<style lang="scss" scoped>
.diary-list-view {
  background: #f8fafc;
  min-height: 100vh;
  padding: 2rem 1rem;

  .page-header {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .header-content {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-text {
        .page-title {
          font-size: 2rem;
          font-weight: 700;
          color: #1e293b;
          margin: 0 0 0.5rem 0;
        }

        .page-subtitle {
          color: #64748b;
          margin: 0;
        }
      }

      .header-actions {
        .write-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
          color: white;
          text-decoration: none;
          border-radius: 8px;
          font-weight: 500;
          transition: all 0.2s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
          }

          svg {
            width: 18px;
            height: 18px;
          }
        }
      }
    }
  }

  .search-section {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .search-container {
      background: white;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .search-box {
        position: relative;
        margin-bottom: 1.5rem;

        .search-icon {
          position: absolute;
          left: 1rem;
          top: 50%;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
          color: #9ca3af;
        }

        .search-input {
          width: 100%;
          padding: 0.75rem 1rem 0.75rem 2.5rem;
          border: 2px solid #e5e7eb;
          border-radius: 8px;
          font-size: 1rem;
          background: #f9fafb;
          transition: all 0.2s ease;

          &:focus {
            outline: none;
            border-color: #3b82f6;
            background: white;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }

          &::placeholder {
            color: #9ca3af;
          }
        }
      }

      .filters {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        flex-wrap: wrap;

        .filter-group {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;

          .filter-label {
            font-size: 0.8rem;
            color: #6b7280;
            font-weight: 500;
          }

          .filter-select {
            padding: 0.5rem 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 0.9rem;
            background: white;
            min-width: 120px;

            &:focus {
              outline: none;
              border-color: #3b82f6;
              box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }
          }
        }

        .clear-filters {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          background: #f3f4f6;
          color: #374151;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          font-size: 0.9rem;
          transition: all 0.2s ease;
          margin-left: auto;

          &:hover {
            background: #e5e7eb;
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }

  .stats-section {
    max-width: 1200px;
    margin: 0 auto 2rem;

    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;

      .stat-item {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 1rem;

        .stat-icon {
          width: 40px;
          height: 40px;
          background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;

          svg {
            width: 20px;
            height: 20px;
            color: #475569;
          }
        }

        .stat-content {
          .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e293b;
          }

          .stat-label {
            font-size: 0.9rem;
            color: #64748b;
          }
        }
      }
    }
  }

  .diary-list-section {
    max-width: 1200px;
    margin: 0 auto;

    .list-header {
      background: white;
      padding: 1.5rem;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .list-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;

        .result-count {
          font-weight: 400;
          color: #6b7280;
          font-size: 1rem;
        }
      }

      .view-controls {
        display: flex;
        gap: 0.5rem;

        .view-btn {
          width: 36px;
          height: 36px;
          border: none;
          background: transparent;
          border-radius: 6px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6b7280;
          transition: all 0.2s ease;

          &:hover {
            background: #f3f4f6;
          }

          &.active {
            background: #3b82f6;
            color: white;
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .diary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 1.5rem;
      padding: 1.5rem;
      background: white;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .diary-card {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        background: white;

        &:hover {
          border-color: #3b82f6;
          box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
          transform: translateY(-4px);
        }

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;

          .card-date {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f8fafc;
            padding: 0.5rem;
            border-radius: 8px;
            min-width: 50px;

            .date-day {
              font-size: 1.5rem;
              font-weight: 700;
              color: #3b82f6;
              line-height: 1;
            }

            .date-month {
              font-size: 0.7rem;
              color: #64748b;
              text-transform: uppercase;
            }
          }

          .card-mood {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .mood-emoji {
              font-size: 1.25rem;
            }

            .mood-text {
              font-size: 0.8rem;
              color: #6b7280;
              font-weight: 500;
            }
          }
        }

        .card-content {
          margin-bottom: 1rem;

          .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.5rem 0;
          }

          .card-preview {
            color: #475569;
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }

        .card-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .card-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.8rem;
            color: #6b7280;

            .meta-photos {
              display: flex;
              align-items: center;
              gap: 0.25rem;

              svg {
                width: 12px;
                height: 12px;
              }
            }
          }

          .card-actions {
            display: flex;
            gap: 0.5rem;

            .action-btn {
              width: 28px;
              height: 28px;
              border: none;
              border-radius: 6px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s ease;

              svg {
                width: 14px;
                height: 14px;
              }

              &.edit {
                background: rgba(59, 130, 246, 0.1);
                color: #3b82f6;

                &:hover {
                  background: rgba(59, 130, 246, 0.2);
                }
              }

              &.share {
                background: rgba(16, 185, 129, 0.1);
                color: #10b981;

                &:hover {
                  background: rgba(16, 185, 129, 0.2);
                }
              }
            }
          }
        }
      }
    }

    .diary-timeline {
      background: white;
      border-radius: 0 0 12px 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .timeline-item {
        display: flex;
        gap: 1.5rem;
        padding: 1.5rem;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
        transition: background 0.2s ease;

        &:hover {
          background: rgba(59, 130, 246, 0.02);
        }

        &:last-child {
          border-bottom: none;
        }

        .timeline-date {
          display: flex;
          gap: 1rem;
          min-width: 200px;

          .date-marker {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            .marker-dot {
              width: 12px;
              height: 12px;
              background: #3b82f6;
              border-radius: 50%;
              z-index: 2;
            }

            .marker-line {
              width: 2px;
              height: 40px;
              background: #e5e7eb;
              margin-top: 4px;
            }
          }

          .date-info {
            .date-main {
              font-weight: 600;
              color: #1e293b;
              font-size: 0.95rem;
            }

            .date-time {
              font-size: 0.8rem;
              color: #64748b;
            }
          }
        }

        .timeline-content {
          flex: 1;

          .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;

            .content-title {
              font-size: 1.1rem;
              font-weight: 600;
              color: #1e293b;
              margin: 0;
            }

            .mood-indicator {
              font-size: 1.25rem;

              &.happy { filter: hue-rotate(0deg); }
              &.excited { filter: hue-rotate(30deg); }
              &.calm { filter: hue-rotate(120deg); }
              &.thoughtful { filter: hue-rotate(240deg); }
              &.sad { filter: hue-rotate(200deg); }
              &.tired { filter: hue-rotate(300deg); }
              &.angry { filter: hue-rotate(350deg); }
            }
          }

          .content-preview {
            color: #475569;
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0 0 0.75rem 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .content-meta {
            display: flex;
            gap: 1rem;
            font-size: 0.8rem;

            .meta-item {
              display: flex;
              align-items: center;
              gap: 0.25rem;
              color: #6b7280;

              &.photos {
                color: #3b82f6;
              }

              svg {
                width: 12px;
                height: 12px;
              }
            }
          }
        }
      }
    }
  }

  .empty-state {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;

    .empty-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 1.5rem;
      color: #d1d5db;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    .empty-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 0.5rem 0;
    }

    .empty-text {
      color: #6b7280;
      margin: 0 0 2rem 0;
    }

    .empty-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;

      .empty-action-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;

        svg {
          width: 16px;
          height: 16px;
        }

        &.primary {
          background: #3b82f6;
          color: white;
          border: none;

          &:hover {
            background: #2563eb;
            transform: translateY(-2px);
          }
        }

        &.secondary {
          background: #f3f4f6;
          color: #374151;
          border: none;

          &:hover {
            background: #e5e7eb;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .diary-list-view {
    .diary-list-section .diary-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .diary-list-view {
    padding: 1rem 0.5rem;

    .page-header .header-content {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
      padding: 1.5rem;

      .header-text .page-title {
        font-size: 1.75rem;
      }

      .header-actions {
        justify-content: center;

        .action-btn {
          padding: 0.75rem 1.25rem;
          font-size: 0.9rem;
        }
      }
    }

    .search-section .search-container {
      padding: 1.5rem;

      .search-input input {
        font-size: 16px;
        padding: 0.75rem 1rem;
      }

      .filters {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;

        .filter-group {
          width: 100%;

          select {
            width: 100%;
            padding: 0.5rem;
            font-size: 0.9rem;
          }
        }

        .clear-filters {
          margin-left: 0;
          padding: 0.5rem 1rem;
          font-size: 0.9rem;
        }
      }
    }

    .stats-section .stats-container {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 1.5rem;

      .stat-card {
        padding: 1.5rem;

        .stat-content .stat-number {
          font-size: 1.75rem;
        }

        .stat-icon {
          width: 40px;
          height: 40px;

          svg {
            width: 20px;
            height: 20px;
          }
        }
      }
    }

    .diary-list-section {
      .list-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.5rem;

        .list-controls {
          justify-content: center;
          flex-wrap: wrap;
          gap: 0.75rem;
        }
      }

      .diary-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;

        .diary-card {
          .diary-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
          }

          .diary-content .diary-tags {
            margin-top: 1rem;
          }

          .diary-footer {
            .diary-actions {
              gap: 0.5rem;

              .diary-action {
                padding: 0.4rem;

                svg {
                  width: 14px;
                  height: 14px;
                }
              }
            }
          }
        }
      }

      .diary-timeline .timeline-item {
        flex-direction: column;
        gap: 1rem;

        .timeline-date {
          min-width: auto;
          justify-content: center;
        }

        .timeline-content {
          margin-left: 0;
          text-align: center;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .diary-list-view {
    padding: 0.75rem 0.25rem;

    .page-header .header-content {
      padding: 1.25rem;

      .header-text .page-title {
        font-size: 1.5rem;
      }

      .header-actions .action-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
      }
    }

    .search-section .search-container,
    .stats-section .stats-container {
      padding: 1.25rem;
    }

    .diary-list-section {
      .list-header {
        padding: 1.25rem;
      }

      .diary-grid {
        padding: 0.75rem;

        .diary-card {
          padding: 1.25rem;

          .diary-content {
            .diary-excerpt {
              font-size: 0.85rem;
              line-height: 1.4;
            }

            .diary-tags .tag {
              padding: 0.2rem 0.4rem;
              font-size: 0.7rem;
            }
          }
        }
      }

      .diary-timeline .timeline-item {
        padding: 0.75rem 0;

        .timeline-content {
          .timeline-preview {
            font-size: 0.85rem;
            line-height: 1.4;
          }
        }
      }
    }
  }
}
</style>
